<template>
  <div class="others-main">
    <!-- Suwork -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        Suwork帮助企业负责人统筹管理数据，科学决策，即时了解企业的客户、项目、人事和财务信息。
      </p>
      <div
        class="card"
        :class="activeItem == 'suwork' ? 'active' : ''"
        @click.stop="openFrom('suwork')"
      >
        <img src="@/icons/suwork.png" alt="" />
        <div class="text">
          <h4>Suwork</h4>
          <p>
            Suwork帮助企业负责人统筹管理数据，科学决策，即时了解企业的客户、项目、人事和财务信息。
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- 百度翻译 -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        百度翻译提供即时免费200+语言翻译服务，拥有网页、APP、API产品，支持文本翻译、文档翻译、图片翻译等特色功能，满足用户查词翻译、文献翻译、合同翻译等需求，随时随地沟通全世界
      </p>
      <div
        class="card"
        :class="activeItem == 'translate' ? 'active' : ''"
        @click="openFrom('translate')"
      >
        <img src="@/icons/yi.png" alt="" />
        <div class="text">
          <h4>百度翻译</h4>
          <p>
            百度翻译提供即时免费200+语言翻译服务，拥有网页、APP、API产品，支持文本翻译、文档翻译、图片翻译等特色功能，满足用户查词翻译、文献翻译、合同翻译等需求，随时随地沟通全世界
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- Sitemap -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        Sitemap
        可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的
        Sitemap 形式，就是XML
        文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站
      </p>
      <div
        class="card"
        :class="activeItem == 'sitemMap' ? 'active' : ''"
        @click="openFrom('sitemMap')"
      >
        <img src="@/icons/sitemap.png" alt="" />
        <div class="text">
          <h4>Sitemap</h4>
          <p>
            Sitemap
            可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的
            Sitemap 形式，就是XML
            文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- 关键词排名查询配置 -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        站长之家(中国站长站)为个人站长与企业网络提供全面的站长资讯、源代码程序下载、海量建站素材、强大的搜索优化辅助工具、网络产品设计与运营理念以及一站式网络解决方案，十年来我们一直致力为中文网站提供动力
      </p>
      <div
        class="card"
        :class="activeItem == 'zhanzhang' ? 'active' : ''"
        @click="openFrom('zhanzhang')"
      >
        <img src="@/icons/zhanzhang.png" alt="" />
        <div class="text">
          <h4>关键词排名查询配置</h4>
          <p>
            站长之家(中国站长站)为个人站长与企业网络提供全面的站长资讯、源代码程序下载、海量建站素材、强大的搜索优化辅助工具、网络产品设计与运营理念以及一站式网络解决方案，十年来我们一直致力为中文网站提供动力
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- 词爪 -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        词爪在线违禁词查询工具，整理目前新广告法中违禁词，极限词，敏感词等各种违规词，提供多种查询方式：文字、图片、链接地址、文档；细分行业20个以上，更快提醒您文章中出现的违禁词/禁用词，降低处罚违规风险
      </p>
      <div
        class="card"
        :class="activeItem == 'cizhua' ? 'active' : ''"
        @click="openFrom('cizhua')"
      >
        <img src="@/icons/cizhua.png" alt="" />
        <div class="text">
          <h4>词爪</h4>
          <p>
            词爪在线违禁词查询工具，整理目前新广告法中违禁词，极限词，敏感词等各种违规词，提供多种查询方式：文字、图片、链接地址、文档；细分行业20个以上，更快提醒您文章中出现的违禁词/禁用词，降低处罚违规风险
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- 阿里短信 -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        阿里云信使是一家正规sms短信平台服务商,致力短信接口通道应用,主要提供企业短信,短信验证码接口,短信平台二次开发,短信接口,短信应用,短信通知等服务
      </p>
      <div
        class="card"
        :class="activeItem == 'ali' ? 'active' : ''"
        @click="openFrom('ali')"
      >
        <img src="@/icons/ali.png" alt="" />
        <div class="text">
          <h4>阿里短信</h4>
          <p>
            阿里云信使是一家正规sms短信平台服务商,致力短信接口通道应用,主要提供企业短信,短信验证码接口,短信平台二次开发,短信接口,短信应用,短信通知等服务
          </p>
        </div>
      </div>
    </el-tooltip>
    <div class="card none el-tooltip"></div>
    <div class="card none el-tooltip"></div>
    <BouncedDialog
      :title="dialogTitle"
      width="60"
      :dialog-show.sync="dialogShow"
    >
      <el-form
        class="others"
        :model="othersForm"
        :rules="others"
        inline
        label-width="120px"
      >
        <!-- Suwork配置 -->
        <div v-if="activeItem == 'suwork'">
          <el-form-item
            label="Suwork API"
            :prop="
              othersForm.baidu_others_account ||
              othersForm.baidu_others_password ||
              othersForm.baidu_others_token
                ? 'baidu_others_password'
                : ' '
            "
          >
            <el-input
              v-model="othersForm.suwork_api"
              class="right"
              placeholder="请配置接口地址"
              type="text"
            />
          </el-form-item>
          <el-form-item
            label="Suwork APPID"
            :prop="
              othersForm.baidu_others_account ||
              othersForm.baidu_others_password ||
              othersForm.baidu_others_token
                ? 'baidu_others_account'
                : ' '
            "
          >
            <el-input
              v-model="othersForm.suwork_appid"
              class="left"
              placeholder="请输入appid"
              type="password"
            />
          </el-form-item>
          <el-form-item
            label="Suwork 密钥"
            :prop="
              othersForm.baidu_others_account ||
              othersForm.baidu_others_password ||
              othersForm.baidu_others_token
                ? 'baidu_others_password'
                : ' '
            "
          >
            <el-input
              v-model="othersForm.suwork_secret"
              class="right"
              placeholder="请输入密钥"
              type="password"
            />
          </el-form-item>
        </div>
        <!-- 百度翻译配置 -->
        <div v-if="activeItem == 'translate'">
          <el-form-item label="百度翻译 APPID">
            <el-input
              v-model="othersForm.baidu_translate_appid"
              type="password"
            />
          </el-form-item>
          <el-form-item label="百度翻译 Token">
            <el-input
              v-model="othersForm.baidu_translate_token"
              type="password"
            />
          </el-form-item>
        </div>
        <!-- sitemap密钥 -->
        <div v-if="activeItem == 'sitemMap'">
          <el-form-item label="百度密钥">
            <el-input
              v-model="othersForm.baidu_sitemap_token"
              type="password"
            />
          </el-form-item>
          <!-- <el-form-item label="谷歌密钥">
            <el-input
              v-model="othersForm.google_sitemap_token"
              type="password"
            />
          </el-form-item>
          <el-form-item label="360密钥">
            <el-input
              v-model="othersForm.three_sitemap_token"
              type="password"
            />
          </el-form-item>
          <el-form-item label="搜狗密钥">
            <el-input
              v-model="othersForm.sogou_sitemap_token"
              type="password"
            />
          </el-form-item> -->
        </div>
        <!-- 关键词排名查询配置 -->
        <div v-if="activeItem == 'zhanzhang'">
          <el-form-item label="自动查询频率">
            <el-select v-model="othersForm.keywords_search_time">
              <el-option label="每小时" value="hour" />
              <el-option label="每天" value="day" />
              <el-option label="每周" value="week" />
            </el-select>
          </el-form-item>
          <el-form-item label="站长之家 Token">
            <el-input v-model="othersForm.chinaz_token" type="password" />
          </el-form-item>
        </div>
        <!-- 词爪配置 -->
        <div v-if="activeItem == 'cizhua'">
          <el-form-item label="词爪密钥" :prop="othersForm.cizhua_secret">
            <el-input
              v-model="othersForm.cizhua_secret"
              class="right"
              placeholder="请输入词爪 密钥"
              type="password"
            />
          </el-form-item>
        </div>
        <!-- 阿里云短信配置 -->
        <div v-if="activeItem == 'ali'">
          <el-form-item
            label="AccessKeyid"
            :prop="othersForm.ali_access_key_id"
          >
            <el-input
              v-model="othersForm.ali_access_key_id"
              class="right"
              placeholder="请输入阿里短信AccessKeyid"
            />
          </el-form-item>
          <el-form-item
            label="AccessKeySecret"
            :prop="othersForm.ali_access_key_secret"
          >
            <el-input
              v-model="othersForm.ali_access_key_secret"
              class="right"
              placeholder="请输入阿里短信AccessKeySecret"
            />
          </el-form-item>
          <el-form-item label="模板Code" :prop="othersForm.ali_template_code">
            <el-input
              v-model="othersForm.ali_template_code"
              class="right"
              placeholder="请输入阿里短信模板Code"
            />
          </el-form-item>
          <el-form-item label="签名名称" :prop="othersForm.ali_sign_name">
            <el-input
              v-model="othersForm.ali_sign_name"
              class="right"
              placeholder="请输入阿里短信签名名称"
            />
          </el-form-item>
        </div>
        <el-form-item label=" ">
          <el-button type="primary" class="save" @click="saveOthers">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </BouncedDialog>
  </div>
</template>

<script>
import systemApi from '@/api/system/system'
// import log from '@/api/log'
export default {
  props: ['data'],
  data() {
    return {
      dialogTitle: '',
      dialogShow: false,
      activeItem: '',
      othersForm: {
        group: this.data.group,
        suwork_api: '',
        suwork_appid: '',
        suwork_secret: '',
        keywords_search_time: '',
        five_baidu_pc: '',
        five_baidu_mob: '',
        haosou_pc: '',
        sougou_mob: '',
        baidu_translate_appid: '',
        baidu_translate_token: '',
        baidu_sitemap_token: '',
        google_sitemap_token: '',
        three_sitemap_token: '',
        sogou_sitemap_token: '',
        cizhua_appid: '',
        cizhua_secret: '',
        chinaz_token: '',
        ali_access_key_id: '',
        ali_access_key_secret: '',
        ali_template_code: '',
        ali_sign_name: ''
      },
      others: {},
      filesData: ''
    }
  },
  created() {
    this.filesData = this.data.children

    this.filesData.forEach(el => {
      if (el.children.length > 0) {
        el.children.forEach(item => {
          if (item.children.length > 0) {
            item.children.forEach(element => {
              this.othersForm[element.title] = element.value
            })
          } else {
            this.othersForm[item.title] = item.value
          }
        })
      } else if (el.children.length == 0) {
        this.othersForm[el.title] = el.value
      }
    })
  },
  methods: {
    openFrom(data) {
      this.activeItem = data
      // this.dialogTitle = data
      switch (data) {
        case 'suwork':
          this.dialogTitle = 'Suwork 配置'
          break
        case 'translate':
          this.dialogTitle = '百度翻译配置'
          break
        case 'sitemMap':
          this.dialogTitle = 'SitemMap 配置'
          break
        case 'zhanzhang':
          this.dialogTitle = '关键词排名查询配置'
          break
        case 'cizhua':
          this.dialogTitle = '词爪配置'
          break
        case 'ali':
          this.dialogTitle = '阿里短信'
          break
        default:
          break
      }
      this.dialogShow = true
    },
    saveOthers() {
      systemApi.sysUpdate({ ...this.othersForm }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tooltip {
  width: 300px;
}
.others-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px 20px;
}
.card.none {
  padding: 0;
  margin: 0;
  height: 0;
  border: none;
  display: block;
}
.card.active {
  border: solid 1px #f84311;
}
.card {
  cursor: pointer;
  border: solid 1px #eee;
  background-color: #f9f9f9;
  width: calc(25% - 20px);
  margin-bottom: 20px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  img {
    width: 43px;
    height: 43px;
  }
  .text {
    width: calc(100% - 60px);
    h4,
    p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
    }
    h4 {
      font-size: 13px;
    }
    p {
      font-size: 13px;
      color: #999;
      line-height: 30px;
    }
  }
}
</style>
